<script setup lang="ts">
//主视频框架，包含视频和地图，还有下面的列表
import { reactive, ref, shallowRef } from 'vue'
import type { Component, ShallowRef } from 'vue'
import CommodityList from '@/views/gps/renewal/orders/manage/commodity.vue'
import OrdersList from '@/views/gps/renewal/orders/manage/Orders.vue'
import PayList from '@/views/gps/renewal/orders/manage/pay.vue'
type PageName = 'commodity' | 'orders' | 'pay'
type Module = { [key in PageName]: { module: ShallowRef<Component>; data: ShallowRef<any[]>; total: number } }
const deviceInfoRef = ref()
const activeName = ref<PageName>('commodity')

const currenComponent = shallowRef<Component>(CommodityList)
// @ts-ignore
const componentsList = reactive<Module>({
  commodity: {
    module: shallowRef(CommodityList),
    data: shallowRef([]),
    total: 0
  },
  orders: {
    module: shallowRef(OrdersList),
    data: shallowRef([]),
    total: 0
  },
  pay: {
    module: shallowRef(PayList),
    data: shallowRef([]),
    total: 0
  }
})

function tabChange(name: PageName) {
  currenComponent.value = componentsList[name].module
}

initData()

function initData() {
  getAllAlarm()
}

function getAllAlarm() {

}
</script>

<template>
  <el-card>
    <el-tabs v-model="activeName" @tab-change="tabChange">
      <el-tab-pane label="商品" name="commodity"></el-tab-pane>
      <el-tab-pane label="商品订单" name="orders"></el-tab-pane>
      <el-tab-pane label="支付订单" name="pay"></el-tab-pane>
    </el-tabs>
    <component
        :is="currenComponent"
        ref="deviceInfoRef"
        class="set_height"></component>
  </el-card>
</template>

<style scoped lang="css">
.container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>
